<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>网上预约清洁服务系统</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-image: url("/images/admin-index-background-3.png");
            background-repeat: no-repeat;
            background-size: cover;
        }

        header {
            background-color: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
        }

        .container {
            display: flex;
        }

        .sidebar {
            width: 200px; /* 你可以根据需要调整这个值 */
            background-color: #f4f4f4;
            padding: 10px;
        }

        .sidebar ul {
            list-style-type: none;
            padding: 0;
        }

        .sidebar li a {
            display: block;
            padding: 10px;
            text-decoration: none;
            color: #333;
        }

        .sidebar li a:hover {
            background-color: #ddd;
        }

        .sidebar li a:active {
            background-color: gray;
        }

        .content {
            flex-grow: 1; /* 让内容区域占据剩余空间 */
            padding: 20px;

        }

        .logo a {
            margin-left: 25%;
            text-decoration: none;
            color: white;
        }

        .error {
            color: red;
        }

        table {
            /*border-collapse: collapse; !* 合并相邻边框 *!*/
            width: 100%; /* 表格宽度为100% */
            text-align: center;
        }

        td, th {
            border-right: 1px solid black; /* 设置右侧边框 */
            padding: 8px; /* 添加一些内边距 */
        }

        /* 移除第一个单元格的左侧边框（可选，如果表格左侧不需要边框） */
        tr td:first-child, tr th:first-child {
            border-left: 1px solid black;
        }

        /* 移除最后一行单元格的右侧边框（可选，如果表格右侧不需要边框） */
        tr:last-child td {
            border-right: 1px solid black;
        }


        #inputSearch1 {
            width: 300px;
            margin-left: 30%;
            margin-bottom: 20px;
            height: 30px;
            font-size: 20px;
        }
        #inputSearch2 {
            width: 300px;
            margin-left: 30%;
            margin-bottom: 20px;
            height: 30px;
            font-size: 20px;
        }
        #inputSearch3 {
            width: 300px;
            margin-left: 30%;
            margin-bottom: 20px;
            height: 30px;
            font-size: 20px;
        }
        #inputSearch4 {
            width: 300px;
            margin-left: 30%;
            margin-bottom: 20px;
            height: 30px;
            font-size: 20px;
        }
        thead {
            background-color: black;
            color: #f4f4f4;
        }

        .odd-row {
            background-color: #cccccc; /* 你可以设置你想要的颜色 */
        }

        .even-row {
            background-color: #f4f4f4; /* 你可以设置你想要的颜色 */
        }

        tbody tr:hover {
            background: grey;
        }

        tbody tr:hover td{
            color: white;
        }
    </style>
</head>
<body>

<header>
    <div class="logo">
        智约清洁后台管理
        <a th:if="${session != null && session.user != null}" th:href="@{/quit}">退出</a>
    </div>
</header>

<div class="container">
    <nav class="sidebar">
        <!-- 导航栏链接 -->
        <ul>
            <li th:if="${index}"><a th:href="@{/admin/index}" style="background-color: gray">主页</a></li>
            <li th:if="${index != 1}"><a th:href="@{/admin/index}">主页</a></li>
            <li th:if="${adminAppointment}"><a th:href="@{/adminAppointment}"
                                               style="background-color: gray">预约管理</a></li>
            <li th:if="${adminAppointment != 1}"><a th:href="@{/adminAppointment}">预约管理</a></li>
            <li th:if="${adminService}"><a th:href="@{/adminService}" style="background-color: gray">清洁服务管理</a>
            </li>
            <li th:if="${adminService != 1}"><a th:href="@{/adminService}">清洁服务管理</a></li>
            <li th:if="${adminAddService}"><a th:href="@{/toAdminAddService}"
                                              style="background-color: gray">添加清洁服务</a></li>
            <li th:if="${adminAddService != 1}"><a th:href="@{/toAdminAddService}">添加清洁服务</a></li>
            <li th:if="${AdminRating}"><a th:href="@{/AdminRating}" style="background-color: gray">评价管理</a></li>
            <li th:if="${AdminRating != 1}"><a th:href="@{/AdminRating}">评价管理</a></li>
            <li th:if="${adminUser}"><a th:href="@{/adminUser}" style="background-color: gray">用户管理</a></li>
            <li th:if="${adminUser != 1}"><a th:href="@{/adminUser}">用户管理</a></li>
            <li th:if="${adminAddUser}"><a th:href="@{/toAdminAddUser}" style="background-color: gray">添加用户</a></li>
            <li th:if="${adminAddUser != 1}"><a th:href="@{/toAdminAddUser}">添加用户</a></li>
        </ul>
    </nav>

    <main class="content">
        <!-- 主要内容区域 -->
        <th:block th:if="${index} == 1">
            <h1>欢迎来到网上预约清洁服务系统后台</h1>
            <h3>提供预约管理、清洁服务管理、添加清洁服务、评价管理、用户管理、添加用户的功能</h3>
        </th:block>
        <th:block th:if="${adminAppointment == 1}">
            <div th:if="${queryAppointment == 1}">
                <form th:action="@{/searchAdminAppointment}" method="post">
                    <p>
                        <span><input type="text" name="keyword" id="inputSearch1"/></span>
                        <span><input type="submit" value="搜索"/></span>
                    </p>
                </form>
                <table>
                    <thead>
                    <tr>
                        <th>服务</th>
                        <th>用户</th>
                        <th>预约时间</th>
                        <th>预约地点</th>
                        <th>联系电话</th>
                        <th>预约状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="appointment,appointmentStat:${appointmentList}"
                        th:class="${appointmentStat.index % 2 == 0} ? 'even-row' : 'odd-row'">
                        <td th:text="${serviceList.get(appointmentStat.index).getName()}"></td>
                        <td th:text="${userList.get(appointmentStat.index).getUsername()}"></td>
                        <td th:text="${appointment.getAppointmentTime()}"></td>
                        <td th:text="${appointment.getAppointmentLocation()}"></td>
                        <td th:text="${appointment.getPhone()}"></td>
                        <td th:text="${appointment.getStatus()}"></td>
                        <td>
                            <a th:href="@{'/toEditAppointment?id='+${appointment.getId()}}">
                                <button type="button">编辑</button>
                            </a>
                            <a th:href="@{'/deleteAppointment?id='+${appointment.getId()}}">
                                <button type="button">删除</button>
                            </a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div th:if="${editAppointment == 1}">
                <form th:action="@{/editAppointment}" method="post" style="margin-left: 35%">
                    <h2>编辑预约订单</h2>
                    <p>服务：<input type="text" name="serviceName" th:value="${service.getName()}" required/></p>
                    <p>预约用户：<input type="text" name="username" th:value="${user.getUsername()}" required/></p>
                    <p>预约时间：<input type="text" name="appointmentTime"
                                       th:value="${appointment.getAppointmentTime()}" required/></p>
                    <p>预约地点：<input type="text" name="appointmentLocation"
                                       th:value="${appointment.getAppointmentLocation()}" required/></p>
                    <p>联系电话：<input type="text" name="phone" th:value="${appointment.getPhone()}" required/></p>
                    <p>预约订单状态：
                        <select name="status">
                            <option th:if="${appointment.getStatus() == '预约中'}" value="预约中" selected>预约中
                            </option>
                            <option th:if="${appointment.getStatus() != '预约中'}" value="预约中">预约中</option>
                            <option th:if="${appointment.getStatus() == '预约成功'}" value="预约成功" selected>
                                预约成功
                            </option>
                            <option th:if="${appointment.getStatus() != '预约成功'}" value="预约成功">预约成功</option>
                            <option th:if="${appointment.getStatus() == '未支付'}" value="未支付" selected>未支付
                            </option>
                            <option th:if="${appointment.getStatus() != '未支付'}" value="未支付">未支付</option>
                            <option th:if="${appointment.getStatus() == '已支付'}" value="已支付" selected>已支付
                            </option>
                            <option th:if="${appointment.getStatus() != '已支付'}" alue="已支付">已支付</option>
                            <option th:if="${appointment.getStatus() == '未完成'}" value="未完成" selected>未完成
                            </option>
                            <option th:if="${appointment.getStatus() != '未完成'}" value="未完成">未完成</option>
                            <option th:if="${appointment.getStatus() == '已完成'}" value="未完成" selected>已完成
                            </option>
                            <option th:if="${appointment.getStatus() != '已完成'}" value="已完成">已完成</option>
                        </select>
                    </p>
                    <p><input type="submit" value="确认编辑"/>
                        <a href="javascript:void(0)" onclick="history.back()">
                            <button type="button">取消编辑</button>
                        </a>
                    </p>
                    <input type="hidden" name="id" th:value="${appointment.getId()}"/>
                    <input type="hidden" name="userId" th:value="${user.getId()}"/>
                    <input type="hidden" name="serviceId" th:value="${service.getId()}"/>
                </form>
            </div>
        </th:block>
        <th:block th:if="${adminUser}">
            <div th:if="${adminQueryUser}">
                <form th:action="@{/searchUser}" method="post">
                    <p>
                        <span><input type="text" name="keyword" id="inputSearch2"/></span>
                        <span><input type="submit" value="搜索"/></span>
                    </p>
                </form>
                <table>
                    <thead>
                    <tr>
                        <th>用户名</th>
                        <th>密码</th>
                        <th>权限</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="user:${userList}" th:class="${userStat.index % 2 == 0} ? 'even-row' : 'odd-row'">
                        <td th:text="${user.getUsername()}"></td>
                        <td th:text="${user.getPassword()}"></td>
                        <td th:text="${user.getAuthority()}"></td>
                        <td>
                            <a th:href="@{'/toEditAdminUser?id='+${user.getId()}}">
                                <button type="button">编辑</button>
                            </a>
                            <a th:href="@{'/deleteUser?id='+${user.getId()}}">
                                <button type="button">删除</button>
                            </a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div th:if="${editAdminUser}">
                <form th:action="@{/editAdminUser}" method="post" style="margin-left: 35%">
                    <h2>编辑用户信息</h2>
                    <p>用户名：<input type="text" name="username" th:value="${user.getUsername()}" required/></p>
                    <p>密码：<input type="text" name="password" th:value="${user.getPassword()}" required/></p>
                    <p>权限：
                        <select name="authority">
                            <option th:if="${user.getAuthority().equals('普通用户')}" selected>普通用户</option>
                            <option th:if="${!user.getAuthority().equals('普通用户')}">普通用户</option>
                            <option th:if="${user.getAuthority().equals('管理员')}" selected>管理员</option>
                            <option th:if="${!user.getAuthority().equals('管理员')}">管理员</option>
                        </select>
                    </p>
                    <p>
                        <input type="submit" value="确认编辑"/>
                        <a href="javascript:void(0)" onclick="history.back()">
                            <button type="button">取消编辑</button>
                        </a>
                    </p>
                    <input type="hidden" name="id" th:value="${user.getId()}"/>
                </form>
            </div>
        </th:block>
        <th:block th:if="${adminService}">
            <div th:if="${adminQueryService}">
                <form th:action="@{/searchService}" method="post">
                    <p>
                        <span><input type="text" name="keyword" id="inputSearch3"/></span>
                        <span><input type="submit" value="搜索"/></span>
                    </p>
                </form>
                <table>
                    <thead>
                    <tr>
                        <th>服务名称</th>
                        <th>服务描述</th>
                        <th>服务价格</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="service:${serviceList}"
                        th:class="${serviceStat.index % 2 == 0} ? 'even-row' : 'odd-row'">
                        <td th:text="${service.getName()}"></td>
                        <td th:text="${service.getDescription()}"></td>
                        <td th:text="${service.getPrice()}"></td>
                        <td>
                            <a th:href="@{'/toEditAdminService?id='+${service.getId()}}">
                                <button type="button">编辑</button>
                            </a>
                            <a th:href="@{'/deleteService?id='+${service.getId()}}">
                                <button type="button">删除</button>
                            </a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div th:if="${editAdminService}">
                <form th:action="@{/editAdminService}" method="post" style="margin-left: 35%">
                    <h2>编辑服务信息</h2>
                    <p>服务名称：<input type="text" name="name" th:value="${service.getName()}" required/></p>
                    <p>服务描述：</p>
                    <p><textarea name="description" th:text="${service.getDescription()}"
                                 style="min-width: 250px;min-height: 100px" required></textarea></p>
                    <p>服务价格：<input type="text" name="price" th:value="${service.getPrice()}" required/></p>
                    <p>
                        <input type="submit" value="确认编辑"/>
                        <a href="javascript:void(0)" onclick="history.back()">
                            <button type="button">取消编辑</button>
                        </a>
                    </p>
                    <input type="hidden" name="id" th:value="${service.getId()}"/>
                </form>
            </div>
        </th:block>
        <th:block th:if="${adminAddService}">
            <form id="addServiceForm" th:action="@{/adminAddService}" method="post" style="margin-left: 35%">
                <h2>添加清洁服务</h2>
                <p>服务名称：<input type="text" name="name" id="serviceNameInput" /><span
                        id="serviceNameError"></span>
                </p>
                <p>服务描述：</p>
                <p><textarea name="description" style="min-width: 250px;min-height: 100px" id="description"
                             ></textarea>
                    <span id="descriptionError"></span>
                </p>
                <p>服务价格：<input type="number" name="price" id="priceInput" /><span id="priceError"></span></p>
                <script>
                    document.getElementById('priceInput').addEventListener('input', function (e) {
                        var input = e.target.value;
                        var priceError = document.getElementById("priceError");
                        if (input === '') {
                            priceError.textContent = '价格不能为空';
                            priceError.classList.add('error'); // 可以添加一个CSS类来显示错误样式
                        } else {
                            priceError.textContent = '';
                            priceError.classList.remove('error'); // 移除错误样式
                        }
                    });
                    document.getElementById('serviceNameInput').addEventListener('input', function (e) {
                        var input = e.target.value;
                        var serviceNameError = document.getElementById('serviceNameError');
                        if (input === '') {
                            serviceNameError.textContent = '服务名称不能为空';
                            serviceNameError.classList.add('error'); // 可以添加一个CSS类来显示错误样式
                        } else {
                            serviceNameError.textContent = '';
                            serviceNameError.classList.remove('error'); // 移除错误样式
                        }
                    });
                    document.getElementById('description').addEventListener('input', function (e) {
                        var input = e.target.value;
                        var descriptionError = document.getElementById('descriptionError');
                        if (input === '') {
                            descriptionError.textContent = '服务描述不能为空';
                            descriptionError.classList.add('error'); // 可以添加一个CSS类来显示错误样式
                        } else {
                            descriptionError.textContent = '';
                            descriptionError.classList.remove('error'); // 移除错误样式
                        }
                    });

                    document.getElementById('addServiceForm').addEventListener('submit', function (event) {
                        // 阻止表单的默认提交行为
                        event.preventDefault();

                        // 获取表单输入
                        var name = document.getElementById("serviceNameInput");
                        var description = document.getElementById("description");
                        var price = document.getElementById("priceInput");
                        var serviceNameError = document.getElementById('serviceNameError');
                        var descriptionError = document.getElementById('descriptionError');
                        var priceError = document.getElementById("priceError");

                        serviceNameError.textContent = '';
                        descriptionError.textContent = '';
                        priceError.textContent = '';

                        if (name.value === '') {
                            serviceNameError.textContent = '服务名称不能为空';
                            serviceNameError.classList.add("error");
                            return; // 验证不通过，退出函数
                        }
                        if (description.value === '') {
                            descriptionError.textContent = '服务描述不能为空';
                            descriptionError.classList.add("error");
                            return; // 验证不通过，退出函数
                        }
                        if (price.value === '') {
                            priceError.textContent = '价格不能为空';
                            priceError.classList.add("error");
                            return; // 验证不通过，退出函数
                        }
                        this.submit();
                    });
                </script>
                <p>
                    <input type="submit" value="确认添加"/>
                </p>
            </form>
        </th:block>
        <th:block th:if="${AdminRating}">
            <form th:action="@{/searchRating}" method="post">
                <p>
                    <span><input type="text" name="keyword" id="inputSearch4"/></span>
                    <span><input type="submit" value="搜索"/></span>
                </p>
            </form>
            <table>
                <thead>
                <tr>
                    <th>评价服务</th>
                    <th>评价用户</th>
                    <th>用户评分</th>
                    <th>用户反馈</th>
                    <th>创建时间</th>
                    <th>更新时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="rating:${ratingList}" th:class="${ratingStat.index % 2 == 0} ? 'even-row' : 'odd-row'">
                    <td th:text="${serviceList.get(ratingStat.index).getName()}"></td>
                    <td th:text="${userList.get(ratingStat.index).getUsername()}"></td>
                    <td th:text="${rating.getScore()}"></td>
                    <td th:text="${rating.getFeedback()}"></td>
                    <td th:text="${rating.getCreatedTime()}"></td>
                    <td th:text="${rating.getLastUpdatedTime()}"></td>
                    <td>
                        <a th:href="@{'/adminDeleteRating?id='+${rating.getId()}}">
                            <button type="button">删除</button>
                        </a>
                    </td>
                </tr>
                </tbody>
            </table>
        </th:block>
        <th:block th:if="${adminAddUser}">
            <form th:action="@{/adminAddUser}" method="post" style="margin-left: 35%">
                <h2>添加用户</h2>
                <p>用户名：<input type="text" name="username" required/></p>
                <p>密码：<input type="text" name="password" required/></p>
                <p>
                    权限：
                    <select name="authority">
                        <option value="普通用户" selected>普通用户</option>
                        <option value="管理员">管理员</option>
                    </select>
                </p>
                <p><input type="submit" value="确认添加"/></p>
            </form>
        </th:block>
    </main>
</div>
</body>
</html>